<script setup>
import { ref, computed, watch,defineProps } from 'vue';
import { debounce } from 'lodash-es';
import {CheckCircleTwoTone} from '@ant-design/icons-vue'

const props = defineProps({
  password: {
    type: String,
    default: ''
  }
})

console.log(props.password)

// 密码校验
const hasUppercase = computed(() => /[A-Z]/.test(props.password));
const hasLowercase = computed(() => /[a-z]/.test(props.password));
const hasNumber = computed(() => /\d/.test(props.password));
const hasSpecialChar = computed(() => /[!@#$%^&*(),.?":{}|<>]/.test(props.password));
const hasLength = computed(() => props.password.length >= 8 && props.password.length <= 20);

const passwordValidation = computed(() => ({
  length: hasLength.value,
  uppercase: hasUppercase.value,
  lowercase: hasLowercase.value,
  number: hasNumber.value,
  specialChar: hasSpecialChar.value
}));

const validatePasswordDebounced = debounce(() => {}, 300);

watch(() => props.password, validatePasswordDebounced);

</script>

<template>
  <div class="psd-request-container">
    <ul class="psd-request">
      <li :class="{ valid: passwordValidation.length }">
        长度在 8 到 20 个字符
        <span v-if="passwordValidation.length" class="check-mark">
                <check-circle-two-tone two-tone-color="#52c41a" />
            </span>
      </li>
      <li :class="{ valid: passwordValidation.uppercase }">
        至少包含一个大写字母
        <span v-if="passwordValidation.uppercase" class="check-mark">
                <check-circle-two-tone two-tone-color="#52c41a" />
            </span>
      </li>
      <li :class="{ valid: passwordValidation.lowercase }">
        至少包含一个小写字母
        <span v-if="passwordValidation.lowercase" class="check-mark">
                <check-circle-two-tone two-tone-color="#52c41a" />
            </span>
      </li>
      <li :class="{ valid: passwordValidation.number }">
        至少包含一个数字
        <span v-if="passwordValidation.number" class="check-mark">
                <check-circle-two-tone two-tone-color="#52c41a" />
            </span>
      </li>
      <li :class="{ valid: passwordValidation.specialChar }">
        至少包含一个特殊字符
        <span v-if="passwordValidation.specialChar" class="check-mark">
              <check-circle-two-tone two-tone-color="#52c41a" />
            </span>
      </li>
    </ul>
  </div>
</template>

<style scoped>
.psd-request {
  margin-left: -20px;
  margin-top: 30px;
}

.psd-request li.valid {
  color: green;
}

.psd-request li {
  font-size: 10px;
  color: #999999;
  white-space: nowrap;
}

.check-mark {
  color: green;
  margin-left: 5px;
}
</style>